    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>控制元素显示和隐藏示例</title>
      <style>
        /* 为了演示效果，给通知添加简单样式 */
        .notice {
          padding: 10px;
          background-color: #dff0d8;
          color: #3c763d;
          margin-bottom: 10px;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <h2>图书馆开放状态</h2>
        <!-- 使用 v-if 显示或不显示通知 -->
        <div v-if="isLibraryOpen" class="notice">
          图书馆开放中（v-if）
        </div>
        <!-- 使用 v-show 隐藏或显示通知 -->
        <div v-show="isLibraryOpen" class="notice">
          图书馆开放中（v-show）
        </div>
        <button @click="toggleLibrary">切换图书馆状态</button>
      </div>

      <script src="../../../js/vue.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: {
            // 模拟图书馆是否开放，初始为 true 表示开放
            isLibraryOpen: true
          },
          methods: {
            toggleLibrary: function() {
              // 切换图书馆状态：开放变关闭，关闭变开放
              this.isLibraryOpen = !this.isLibraryOpen;
            }
          }
        });
      </script>
    </body>
    </html>